<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>打印</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        .container {
            width: 100%;
            height: 100%;
        }

        * {
            box-sizing: border-box;
        }

        .table-item {
            width: 100%;
            height: 100%;
        }

        .table-item .inner-wrap {
            width: 100%;
            height: 100%;
            background: #fff;
            font-size: 14px;
            padding: 0 10px;
            overflow-y: auto;
        }

        .table-item .inner-wrap .mainHead {
            font-size: 16px;
            line-height: 40px;
            text-align: center;
            font-weight: 600;
            border-bottom: 1px solid #ccc;
        }

        .table-item .inner-wrap .mainHead.old {
            border-bottom: none;
        }

        .table-item .inner-wrap .subHead {
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
        }

        .table-item .inner-wrap table {
            width: 100%;
            border-spacing: 0;
            border-collapse: collapse;
            border-top: 1px solid #ccc;
            margin-bottom: 20px;
        }

        .table-item .inner-wrap table tr {
            border: 1px solid #ccc;
            border-top: none;
        }

        .table-item .inner-wrap table tr.noBorder {
            border: none;
        }

        .table-item .inner-wrap table tr.noBorder td {
            padding-left: 20px;
            border-right: none;
            text-align: center;
        }

        .table-item .inner-wrap table tr td {
            min-height: 40px;
            line-height: 40px;
            text-align: center;
            border-right: 1px solid #ccc;
            text-align: center;
        }

        .table-item .inner-wrap table tr td.sm {
            width: 80px;
        }

        .table-item .inner-wrap table tr td .inLine {
            width: calc(100% - 76px);
            display: inline-block;
        }

        .table-item .inner-wrap table tr td.lang {
            width: 140px;
        }

        .table-item .inner-wrap table tr td.middle {
            width: 100px;
        }

        .table-item .inner-wrap table tr td.largeText {
            padding: 0 5px;
            position: relative;
        }

        .table-item .inner-wrap table tr td.largeText .limitText {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        .table-item .inner-wrap table tr td.largeText textarea {
            margin-top: 10px;
            height: 50px;
            resize: none;
        }

        .table-item .inner-wrap table tr td.addCol span {
            padding: 0 5px;
            line-height: 20px;
            border: 1px solid blue;
            border-radius: 5px;
            cursor: pointer;
        }
        .table-item .inner-wrap table tr td.alignLeft{
            padding-left: 10px;
            text-align: left;
        }

        .table-item .inner-wrap table tr td.del {
            color: #333;
            font-size: 12px;
        }

        .table-item .inner-wrap table tr td.del span {
            padding: 0 5px;
            line-height: 20px;
            border: 1px solid blue;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="container">
        <template v-if="index=='0'">
            <div class=" table-item ">
                <div class="inner-wrap">
                    <div class="mainHead old">
                        <span>宁夏水投中源水务海兴分公司安装抢修派工单</span>
                    </div>
                    <table>
                        <tr>
                            <td class="sm">
                                <span>日期</span>
                            </td>
                            <td colspan="2">
                                <span>时间</span>
                            </td>
                            <td class="middle">
                                <span>用户名</span>
                            </td>
                            <td colspan="4">
                                <span>老王</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>紧急程度</span>
                            </td>
                            <td colspan="2">
                                <span>紧急</span>
                            </td>
                            <td>
                                <span>联系电话</span>
                            </td>
                            <td colspan="3">
                                <span>12345678</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>出勤事由</span>
                            </td>
                            <td colspan="2">
                                <span>bvnjfdssbvnjfdnbj</span>
                            </td>
                            <td>
                                <span>处理人</span>
                            </td>
                            <td colspan="3">
                                <span>老王</span>
                            </td>
                        </tr>
                        <tr>
                            <td :rowspan="table.productList.length+1">
                                <span>工程情况</span>
                            </td>
                            <td>
                                <span>序号</span>
                            </td>
                            <td>
                                <span>工作内容</span>
                            </td>
                            <td class="middle">
                                <span>材料名称</span>
                            </td>
                            <td class="sm">
                                <span>单位</span>
                            </td>
                            <td class="sm">
                                <span>数量</span>
                            </td>
                            <td>
                                <span>备注</span>
                            </td>
                        </tr>
                        <tr v-for="(item,index) in table.productList" :key="index">
                            <td>
                                <span>{{index+1}}</span>
                            </td>
                            <td>
                                <span>工作内容</span>
                            </td>
                            <td>
                                <span>材料名称</span>
                            </td>
                            <td>
                                <span>单位</span>
                            </td>
                            <td>
                                <span>数量</span>
                            </td>
                            <td class="lang">
                                <span>备注</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>处理结果</span>
                            </td>
                            <td colspan="2" class="largeText">
                                <span>vbdshjvbdsijhb</span>
                            </td>
                            <td>
                                <span>处理时间</span>
                            </td>
                            <td colspan="3">
                                <span>{{table.currentTime}}</span>
                            </td>

                        </tr>
                        <tr>
                            <td>
                                <span>库存</span>
                            </td>
                            <td colspan="2" class="alignLeft">
                                <span>库存</span>
                            </td>
                            <td >
                                <span>部门负责人</span>
                            </td>
                            <td colspan="3" class="alignLeft">
                                <span>部门负责人</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>派工负责人</span>
                            </td>
                            <td colspan="2" class="alignLeft">
                                <span>派工负责人</span>
                            </td>
                            <td>
                                <span>审核人</span>
                            </td>
                            <td colspan="3" class="alignLeft">
                                <span>审核人</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </template>
        <template v-if="index=='1'">
            <div class=" table-item ">
                <div class="inner-wrap">
                    <div class="mainHead">
                        <span>检修派工单</span>
                    </div>
                    <div class="subHead">
                        <div class="col">
                            <span>检修单号:</span>
                            <span>NXST:0010</span>
                        </div>
                        <div class="col">
                            <span>派单时间:</span>
                            <span>2018-06-10 08:25</span>
                        </div>
                    </div>
                    <table>
                        <tr>
                            <td>
                                <span>检修地点</span>
                            </td>
                            <td>
                                <span> 检修地点</span>
                            </td>
                            <td>
                                <span>最近处理时间</span>
                            </td>
                            <td colspan="2">
                                <span>2018-09-10 09:10</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>紧急程度</span>
                            </td>
                            <td>
                                <span>紧急</span>
                            </td>
                            <td>
                                <span>检修类型</span>
                            </td>
                            <td colspan="2">
                               <span>管网爆裂</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>上报人</span>
                            </td>
                            <td>
                                <span>上报人</span>
                            </td>
                            <td>
                                <span>联系电话</span>
                            </td>
                            <td colspan="2">
                                <span>联系电话</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>派单人</span>
                            </td>
                            <td>
                                <span>派单人</span>
                            </td>
                            <td>
                                <span>处理人</span>
                            </td>
                            <td colspan="2">
                                <span>处理人</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>隐患描述</span>
                            </td>
                            <td colspan="3" class="alignLeft">
                                <span>隐患描述</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>检修内容</span>
                            </td>
                            <td colspan="3" class="alignLeft">
                                <span>检修内容</span>
                            </td>
                        </tr>
                        <tr>
                            <td :rowspan="table.productList.length+2">
                                <span>材料清单</span>
                            </td>
                            <td>
                                <span>材料名称</span>
                            </td>
                            <td>
                                <span>单位</span>
                            </td>
                            <td>
                                <span>数量</span>
                            </td>
                        </tr>
                        <tr v-for="(item,index) in table.productList" :key="index">
                            <td>
                                <span>材料名称</span>
                            </td>
                            <td>
                                <span>单位</span>
                            </td>
                            <td>
                                <span>数量</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>派发意见</span>
                            </td>
                            <td colspan="3" class="alignLeft">
                                <span>个</span>
                            </td>
                        </tr>
                        <tr class="noBorder">
                            <td colspan="2">
                                <span>派发部门:vfnbdjaskbv</span>
                            </td>
                            <td colspan="2">
                                <span>检修部门:部分的设备vnfji</span>
                            </td>
                        </tr>
                        <tr class="noBorder">
                            <td colspan="2">
                                <span>签字:</span>
                            </td>
                            <td colspan="2">
                                <span>签字:</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </template>
        <template v-if="index=='2'">
            <div class="table-item right-table">
                <div class="inner-wrap">
                    <div class="mainHead">
                        <span>检修反馈单</span>
                    </div>
                    <div class="subHead">
                        <div class="col">
                            <span>检修单号:</span>
                            <span>NXST-0010</span>
                        </div>
                        <div class="col">
                            <span>反馈时间:</span>
                            <span>2018-06-10 08:25</span>
                        </div>
                    </div>
                    <table>
                        <tr>
                            <td>
                                <span>检修地点</span>
                            </td>
                            <td>
                                <span>检修点</span>
                            </td>
                            <td>
                                <span>最近处理时间</span>
                            </td>
                            <td colspan="2">
                                <span>2018-09-10 09:10</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>紧急程度</span>
                            </td>
                            <td>
                                <span>紧急</span>
                            </td>
                            <td>
                                <span>检修类型</span>
                            </td>
                            <td colspan="2">
                                <span>管网漏损</span>
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="3" >
                                <span>检修报告</span>
                            </td>
                            <td colspan="3" class="alignLeft">
                                <span>原因分析:</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" class="alignLeft">
                                <span>处理结果:</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" class="alignLeft">
                                <span>相关建议:</span>
                            </td>
                        </tr>
                        <tr>
                            <td :rowspan="table.productList.length+2">
                                <span>材料清单</span>
                            </td>
                            <td>
                                <span>材料名称</span>
                            </td>
                            <td>
                                <span>单位</span>
                            </td>
                            <td>
                                <span>数量</span>
                            </td>
                        </tr>
                        <tr v-for="(item,index) in table.productList" :key="index">
                            <td>
                                <span>材料名称</span>
                            </td>
                            <td>
                                <span>单位</span>
                            </td>
                            <td>
                                <span>数量</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>检修评价</span>
                            </td>
                            <td colspan="3" class="alignLeft">
                                <span>评价结果</span>
                            </td>
                        </tr>
                        <tr class="noBorder">
                            <td colspan="2">
                                <span>检修部门:</span>
                            </td>
                            <td colspan="2">
                                <span>验收部门:</span>
                            </td>
                        </tr>
                        <tr class="noBorder">
                            <td colspan="2">
                                <span>签字:</span>
                            </td>
                            <td colspan="2">
                                <span>签字:</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </template>
    </div>
    <script src="./js/vue2.0.js"></script>
    <script>
        var temp_index = window.location.search;
        var params = temp_index.split("?")[1].split("=")[1];
        window.onload = function () {
            var table = new Vue({
                el: "#container",
                data: {
                    index: "",
                    table: ""
                },
                methods: {
                },
                mounted: function () {
                    window.print();
                },
                created: function () {
                    this.index = params;
                    let that = this;
                    that.table = JSON.parse(sessionStorage.getItem('table'));
                    console.log(that.table);
                }
            })
        }

    </script>
</body>

</html>